import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  HostListener,
  Input,
  OnInit,
  Output,
} from '@angular/core';
import { itemAnim } from 'src/app/anims';

@Component({
  selector: 'app-task-item',
  templateUrl: './task-item.component.html',
  styleUrls: ['./task-item.component.scss'],
  animations: [itemAnim],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TaskItemComponent implements OnInit {
  @Input() item: any = {};
  @Input() avatar;

  @Output() taskClick = new EventEmitter<void>();

  widerPriority = 'in';

  constructor() {}

  ngOnInit(): void {
    this.avatar = this.item.owner ? this.item.owner.avatar : 'unassigned';
  }

  onItemClick(): void {
    this.taskClick.emit();
  }

  onCheckBoxClick(ev: Event): void {
    ev.stopPropagation();
  }

  @HostListener('mouseenter')
  onMouseEnter(): void {
    this.widerPriority = 'out';
  }

  @HostListener('mouseleave')
  onMouseLeave(): void {
    this.widerPriority = 'in';
  }
}
